<template>
  <!-- ------------------简历库管理-------------- -->
  <div style="margin:20px;">
    <!-- 头部 -->
    <div>
      <span>应聘者:</span>
      <el-input
        v-model="form.name"
        size="small"
        placeholder="请输入应聘者姓名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="search"
      />
      <span style="margin-left:5px;">应聘者职业:</span>
      <el-input
        v-model="form.profession"
        size="small"
        placeholder="请输入应聘者职业"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="search"
      />
      <span style="margin-left:5px;">应聘者身份证号:</span>
      <el-input
        v-model="form.idCard"
        size="small"
        placeholder="请输入应聘者身份证号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="search"
      />

      <el-button
        size="small"
        style="margin-left:20px;"
        type="success"
        icon="el-icon-search"
        @click="search"
      >查询</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :data="jobOffersRecordData"
      style="width: 100%;margin-top:20px;"
      border
      v-loading="loading"
      :default-sort="{prop: 'createTime', order: 'descending'}"
    >
      <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="应聘者" align="center"></el-table-column>
      <el-table-column prop="address" label="家庭住址" align="center"></el-table-column>
      <el-table-column prop="profession" label="职业" align="center"></el-table-column>
      <el-table-column prop="salaryExpectation" label="期望工资" align="center"></el-table-column>
      <el-table-column prop="record" label="备注" align="center"></el-table-column>
      <el-table-column prop="idCard" label="身份证号" align="center"></el-table-column>
      <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="findDetail(scope.row)" style="color:blue;" type="text">查看详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.start"
      :limit.sync="listQuery.length"
      @pagination="search"
    />

    <!-- 详情页对话框 -->
    <el-dialog title="简历详情" append-to-body="true" :visible.sync="showDetailDialog" width="50%">
      <div>
        <h3 style="font-weight: 700;">个人基本情况</h3>

        <div style="width:100%;">
          <el-row>
            <el-col span="4">
              <div>
                <el-image style="width:100%; height:auto;" :src="jobOffersItem.imgUrl" fit="cover"></el-image>
              </div>
            </el-col>
            <el-col span="20">
              <div style="margin-left:30px;display: flex;flex-direction: column;">
                <el-form
                  :model="ruleForm"
                  label-position="left"
                  status-icon
                  :rules="rules"
                  ref="form"
                  label-width="100px"
                  class="mini"
                >
                  <el-form-item label="姓名:">
                    <span>{{ jobOffersItem.name }}</span>
                  </el-form-item>

                  <el-form-item label="性别:">
                    <span
                      style="margin-top:10px;"
                    >{{ (jobOffersItem.sex == 'MAN') ? '男' : (jobOffersItem.sex == 'WOMAN') ? '女' : '' }}</span>
                  </el-form-item>

                  <el-form-item label="年龄:">
                    <span style="margin-top:10px;">{{ getAge(jobOffersItem.birthday) }}</span>
                  </el-form-item>

                  <el-form-item label="联系电话:">
                    <span style="margin-top:10px;">{{ jobOffersItem.tel }}</span>
                  </el-form-item>

                  <el-form-item label="身份证号:">
                    <span style="margin-top:10px;">{{ jobOffersItem.idCard }}</span>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  getList
} from "@/api/resumeInformation";
import { getAge, parseTime, formatDate } from "@/utils/index";
export default {
  components: { Pagination },
  filters: {
    formatDate(time) {
      if (time == undefined) {
        return "";
      }
      let date = new Date(time);
      console.log(new Date(time));
      return formatDate(date, "yyyy-MM-dd");
    }
  },
  data() {
    return {
      loading: false,
      // 正在编辑的列表
      editStartIds: [],
      editEndIds: [],
      // 编辑关联的值
      editStartValues: [],
      editEndValues: [],
      // 对话框
      showDetailDialog: false,
      //简历列表
      jobOffersRecordData: [],
      // 简历单项
      jobOffersItem: {},
      //企业列表
      companyList: [],
      options: [],
      ypStates: [
        {
          value: "DEFAULT",
          label: "应聘中"
        },
        {
          value: "HIRE",
          label: "入职"
        },
        {
          value: "LEAVE",
          label: "离职"
        }
      ],
      // 提交数据体
      form: {
        // 应聘者名称
        name: "",
        // 身份证号
        idCard: "",
        // 家庭住址
        address: "",
      },
      // 分页
      total: 0,
      listQuery: {
        start: 1,
        length: 10,
        companyId: "",
        companyName: "",
        // 应聘者状态
        status: ""
      }
    };
  },
  watch: {
    "form.tdTime": function(vv, ss) {
      console.log(vv);
    }
  },
  created() {
    this.search();
  },
  methods: {
    getAge,
    parseTime,
    //查询企业列表
    // //获取简历记录列表
    // getJobOffersRecordList() {
    //   this.loading = true;
    //   var params = {
    //     pageNum: this.listQuery.start - 1,
    //     pageSize: this.listQuery.length
    //   };
    //   getJobOffersRecord(params).then(res => {
    //     console.log(res);
    //     this.total = res.data.totalElements;
    //     this.jobOffersRecordData = res.data.content;

    //     this.editStartValues = [];
    //     this.editEndValues = [];
    //     this.jobOffersRecordData.forEach(item => {
    //       this.editStartValues.push("");
    //       this.editEndValues.push("");
    //     });
    //     this.loading = false;
    //   });
    // },
    // 扩展队列是否包含某项数据
    // 查看详情
    findDetail(data) {
      this.jobOffersItem = data;
      this.showDetailDialog = true;
    },
    // 查询
    search() {
      this.loading = true;
      var params = {
        pageNum: this.listQuery.start - 1,
        pageSize: this.listQuery.length,
        name: this.form.name,
        idCard: this.form.idCard,
        address: this.form.address,
      };

      getList(params).then(res => {
        console.log(res);
        this.total = res.data.totalElements;
        this.jobOffersRecordData = res.data.content;

        this.editStartValues = [];
        this.editEndValues = [];
        this.jobOffersRecordData.forEach(item => {
          this.editStartValues.push("");
          this.editEndValues.push("");
        });
        this.loading = false;
      });
    },
    filterStatus(status) {
      switch (status) {
        case "DEFAULT":
          return "应聘中";
        case "HIRE":
          return "入职";
        case "LEAVE":
          return "离职";
        default:
          return "";
      }
    },
    formatExcelDate(time) {
      if (time == undefined) {
        return "";
      }
      let date = new Date(time);
      console.log(new Date(time));
      return formatDate(date, "yyyy-MM-dd");
    },
    //时间格式化
    formatter(row, column) {
      return parseTime(row.createTime);
    },
    // 监听选项变化
    selectChange(row) {
      var params = {
        id: row.id,
        status: row.status
      };
      editJobOffersRecord(params).then(res => {
        this.search();
      });
    }
  }
};
</script>

<style>
</style>